import React from "react";
import {
  Input,
  Select,
  Tabs,
  Table,
  Button,
  Checkbox,
  Spin,
  Upload,
  Icon,
  message,
  Row,
  Popconfirm,
  Modal,
  Form
} from "antd"; // Switch
import {
  formatFormParameters,
  isFormReferenced,
} from "components/flowdetailpannel/FlowParameters";
import Zcon from "@cbd/icon";
import _isEmpty from 'lodash/isEmpty';
import UserTaskObject from "components/flowdetailpannel/UserTaskObject";
import CustomTitle from "components/flowdetailpannel/CustomTitle";
import Pannel from "./Pannel";
import FlowFormSelect from "../flowFormSelect";
import styles from "./Pannel.less";
import CarbonCopySetting from "./CarbonCopySetting";
import DuedateSetting from "./DuedateSetting";
import ParametersEditor from "./ParametersEditor";

import {openNotificationWithIcon} from "../../utils/comm";

const {TextArea} = Input;
const {Option} = Select;
const {TabPane} = Tabs;
const modePattern = /^[a-zA-Z_][a-zA-Z_0-9-]*$/;
const unCheck = false;
const check = true;

class CanvasSelected extends Pannel {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: "1",
      name: "",
      key: "",
      documentation: "",
      isEdittingParameters: false,
      formVisible: false,
      ziduanList: [],
      wjList: [],
      filList: null,
      data: [],
      value: undefined,
      fetching: false,
      fileList: [],
      customTitleVisible: false,
      addButtonFormVisible: false,
      // customButtonList: [{buttonName: "buttonName", buttonScript: "2", buttonId: 1}, {
      //   buttonName: "2",
      //   buttonScript: "buttonScript",
      //   buttonId: 2
      // }
      customButtonList: [],
      selectedButtonKeys: [],
    };
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  componentWillReceiveProps(nextPops) {
    const {modelProperties = {}} = this.props;
    if (nextPops.modelProperties?.attachInfos !== modelProperties?.attachInfos) {
      const {attachInfos = []} = nextPops.modelProperties || {};
      this.setState({
        fileList: attachInfos.map(v => {
          return {...v, name: v.fileName}
        }),
      });
    }
  }

  getDatas = (datas) => {
    // const _obj = JSON.stringify(datas),
    // objClone = JSON.parse(_obj);
    // const { filList } = this.state
    this.setState({
      filList: datas,
    })
  }

  // 权限勾选
  onReCommentChecked = (value, record, e, name) => {
    const {filList} = this.state;
    const {modelProperties} = this.props;
    const tempList = filList || modelProperties?.formFields || [];
    // filList.filter( item => {
    //   if (item.fieldId == record.fieldId) {
    //    return item[name] = e.target.checked == true ? 1 : 0
    //   }
    // });
    const tempArr = tempList.map(item => {
      if (item.fieldId === record.fieldId) {
        return {...item, [name]: e.target.checked === true ? 1 : 0}
        //  item[name] = e.target.checked == true ? 1 : 0
      }
      return item;
    });
    this.setState({
      filList: tempArr,
    })
    this.handlePrePropChange("formFields", tempArr,);
  };
  // static getDerivedStateFromProps (props, state) {
  //   console.log(props)
  //   return {
  //     filList: props.quanXian,
  //   };
  // }


  // handleAppIdChange = (value) => {
  //   const { handleAppListChange } = this.props;
  //   if (handleAppListChange instanceof Function) {
  //     handleAppListChange(value);
  //     this.detailChange('appId', value);
  //   }
  // }

  checkModeKey = (ev) => {
    const modeKeyValue = ev.target.value;
    if (!modePattern.test(modeKeyValue)) {
      this.openNotificationWithIcon(
        "warning",
        "",
        `流程编码输入格式不正确（由字母、数字、下划线、中划线，且以字母或者下划线开头），请修改后保存`,
      );
    }
    this.detailChange("key", modeKeyValue);
  };

  detailChange = (name, value, isSelect = false) => {
    const {handleDetailChange, appBusinessObj = {}} = this.props;
    if (handleDetailChange instanceof Function) {
      const obj = {};
      obj[name] = value;
      if (name === "appId") {
        const bussiesArr = appBusinessObj[value] || [];
        const busiId = bussiesArr.length > 0 ? bussiesArr[0].id : undefined;
        obj.busiId = busiId;
      }
      handleDetailChange(obj);
      if (!isSelect) this.handleChage(name, "", true);
    }
  };

  handleformVisible = (visible = false) => {
    if (this.props.disable) return false;
    this.setState({formVisible: visible}, () => {
    });
  };

  handleFormSelect = (selectFormData) => {
    const {updateModelForms} = this.props;

    const {formKey: formkeydefinition, formName: formname, formId, formFields = []} = selectFormData;

    this.handlePrePropChangeObj({
      formkeydefinition,
      formname,
      formId,
      formSource: 'innerForm',
      formFields: !formkeydefinition && !formname ? [] : formFields,
    }, updateModelForms);
    this.handleformVisible(false);
  };

  handleExternalFormSelect = (selectFormData) => {
    const {updateModelForms} = this.props;
    const {formKey = '', formName = '', formId = '', formFields} = selectFormData;
    this.handlePrePropChangeObj({
      formkeydefinition: formKey,
      formname: formName,
      formId,
      formSource: 'externalForm',
      formFields: !formKey && !formName ? [] : formFields,
    }, updateModelForms);
  };

  emptys = () => {
    this.setState({
      filList: [],
    })
  }

  fetchUser = value => {
    const {dispatch} = this.props;
    this.setState({data: [], fetching: true});
    dispatch({
      type: 'usertreeSelect/selectEmployeeList', payload: {employeeName: value, pageIndex: 1, pageSize: 1000},
    }).then(({errCode, datas}) => {
      if (errCode === 0) {
        this.setState({
          data: datas?.dataList?.map(v => ({
            text: v.employeeName,
            value: v.employeeCode,
          })),
          fetching: false,
        });
      }
    });
  };

  handleChange = (value = {}) => {
    const {label = '', key = ''} = value
    this.handlePrePropChange(
      'ownerName',
      label,
      () => {
        this.handlePrePropChange(
          'ownerCode',
          key,
        )
      }
    );

    this.setState({
      value,
      data: [],
      fetching: false,
    });
  };

  handleAddCustomButton = (name, script, list) => {
    const uniqueId = parseInt(Date.now() * Math.random());
    const newButton = {
      buttonName: name,
      buttonId: uniqueId,
      buttonScript: script,
    }
    list.push({...newButton});
    this.handlePrePropChange(
      'customButtonList',
      list,
    );
    this.setState({addButtonFormVisible: false})
  };
  handleDeleteCustomButtons = (buttons, keys = []) => {
    const removedKeyMaps = keys.reduce((a, k) => {
      a[k] = true;
      return a;
    }, {});
    let newButtons;
    let removedIndexes = [];
    newButtons = buttons.filter((u, idx) => {
      if (removedKeyMaps[u.buttonId]) {
        removedIndexes.push(idx);
        return false;
      }
      return true;
    });
    this.handlePrePropChange(
      'customButtonList',
      newButtons,
    );
  }

  renderInfo() {
    const {name, key, description, version, fetching, data, value: _value, selectedButtonKeys, addButtonFormVisible, customButtonName, customButtonScript} = this.state;
    const {
      disable,
      appList = [],
      appBusinessObj = {},
      sampleDetailData = {},
      modelProperties = {},
    } = this.props;
    const nameValue = name === "empty" ? "" : name || sampleDetailData.name;
    const keyValue = key === "empty" ? "" : key || sampleDetailData.key;
    const versionValue = version === "empty" ? 1 : version || sampleDetailData.version;
    const descriptionValue = description === "empty" ? "" : description || sampleDetailData.description;
    const bussiesArr = appBusinessObj[sampleDetailData.appId] || [];
    const owner = _value || {key: modelProperties.ownerCode ?? '', label: modelProperties.ownerName ?? ''};
    const {customTitle = []} = modelProperties ?? {};
    let customTitleStr = ''
    customTitle.map(item => {
      customTitleStr = `${customTitleStr}  ${item.titleName}`;
      return item;
    })
    const customButtons = modelProperties.customButtonList;
    return (
      // <div data-status="canvas-selected" className="pannel" id="canvas_detailpannel">
      <>
        {/* <div className={`pannel-title ${styles.title}`}>流程设置</div> */}
        <div className={`block-container ${styles.content}`}>
          <div className={styles.content_item}>
            <span className={styles.item_label}>流程名称：</span>
            <Input
              disabled={disable}
              placeholder="请输入流程名称"
              maxLength={20}
              value={nameValue}
              onChange={(ev) => this.handleChage("name", ev.target.value)}
              onBlur={(ev) => {
                this.detailChange("name", ev.target.value);
              }}
            />
          </div>
          <div className={styles.content_item}>
            <span className={styles.item_label}>流程编码：</span>
            <Input
              // disabled={disable}
              disabled
              placeholder="请输入流程编码"
              maxLength={20}
              value={keyValue}
              onChange={(ev) => this.handleChage("key", ev.target.value)}
              // onBlur={ev => { this.detailChange('key', ev.target.value) }}
              onBlur={this.checkModeKey}
            />
          </div>
          <div className={styles.content_item}>
            <span className={styles.item_label}>所属应用：</span>
            <Select
              placeholder="请选择所属应用"
              disabled={disable}
              value={sampleDetailData.appId}
              style={{width: "100%"}}
              onChange={(value) => {
                this.detailChange("appId", value, true);
              }}
            >
              {appList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </div>
          <div className={styles.content_item}>
            <span className={styles.item_label}>所属业务：</span>
            <Select
              placeholder="请选择所属业务"
              disabled={disable}
              value={sampleDetailData.busiId}
              style={{width: "100%"}}
              onChange={(value) => {
                this.detailChange("busiId", value, true);
              }}
            >
              {bussiesArr.map((item) => (
                <Option key={`${item.id}${item.name}`} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </div>
          <div className={styles.content_item}>
            <span className={styles.item_label}>流程版本：</span>
            <span className={styles.item_label}>v{versionValue}</span>
          </div>
          {/* <div className={styles.content_item}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span className={styles.item_label_require}>是否公开流程：</span>
              <Switch checked={status} />
            </div>
            <div style={{ color: '#aaa' }}>公开流程后其他租户将也能看到此流程</div>
          </div> */}
          <div className={styles.content_item}>
            <span className={styles.item_label}>流程说明：</span>
            <TextArea
              rows={3}
              disabled={disable}
              maxLength={100}
              placeholder="请输入流程说明"
              value={descriptionValue}
              onChange={(ev) =>
                this.handleChage("description", ev.target.value)
              }
              onBlur={(ev) => {
                this.detailChange("description", ev.target.value);
              }}
            />
          </div>

          <div className={styles.content_item}>
            <span className={styles.item_label}>
              自定义
              <br/>
              标题：
            </span>

            <div
              className={styles.item_custom_title}
              onClick={() => {
                if (!disable) {
                  this.setState({customTitleVisible: true})
                }
              }}
            >
              {customTitleStr}
            </div>

          </div>
          <div className={styles.basic_properties}>基础属性</div>
          <div className={styles.content_item}>
            <span className={styles.item_label}>流程负责人：</span>
            <Select
              allowClear
              showSearch
              labelInValue
              value={owner}
              placeholder="请输入姓名或工号选择流程负责人"
              defaultActiveFirstOption={false}
              showArrow={false}
              filterOption={false}
              notFoundContent={fetching ? <Spin size="small"/> : null}
              onSearch={this.fetchUser}
              onChange={this.handleChange}
              style={{width: '100%'}}
            >
              {data?.map(d => (
                <Option key={d.value}>{d.text}</Option>
              ))}
            </Select>
          </div>
          <div className={styles.originator_title}>流程发起人按钮权限</div>
          <div className={styles.originator_check}>
            <Checkbox
              onChange={(e) => {
                const {checked} = e.target;
                const cancelAuth = checked ? "1" : "0";
                this.handlePrePropChange(
                  'cancelAuth',
                  cancelAuth,
                );
              }}
              checked={
                modelProperties.cancelAuth === "1" ? check : unCheck
              }
            >
              流程撤销
            </Checkbox>
          </div>
          <div className={styles.originator_check}>
            <Checkbox
              onChange={(e) => {
                const {checked} = e.target;
                const urgeAuth = checked ? "1" : "0";
                this.handlePrePropChange(
                  'urgeAuth',
                  urgeAuth,
                );
              }}
              checked={
                modelProperties.urgeAuth === "1" ? check : unCheck
              }
            >
              流程催办
            </Checkbox>
          </div>
          <div className={styles.originator_check}>
            <Checkbox
              onChange={(e) => {
                const {checked} = e.target;
                const pauseAuth = checked ? "1" : "0";
                this.handlePrePropChange(
                  'pauseAuth',
                  pauseAuth,
                );
              }}
              checked={
                modelProperties.pauseAuth === "1" ? check : unCheck
              }
            >
              流程暂停
            </Checkbox>
          </div>
          <div className={styles.originator_check}>
            <Checkbox
              onChange={(e) => {
                const {checked} = e.target;
                const endAuth = checked ? "1" : "0";
                this.handlePrePropChange(
                  'endAuth',
                  endAuth,
                );
              }}
              checked={
                modelProperties.endAuth === "1" ? check : unCheck
              }
            >
              流程终止
            </Checkbox>
          </div>
          <div className={styles.originator_check}>
            <Checkbox
              onChange={(e) => {
                const {checked} = e.target;
                const unPauseAuth = checked ? "1" : "0";
                this.handlePrePropChange(
                  'unPauseAuth',
                  unPauseAuth,
                );
              }}
              checked={
                modelProperties.unPauseAuth === "1" ? check : unCheck
              }
            >
              流程恢复
            </Checkbox>
          </div>
          <div>
            <div className={styles.content_item}>
              <Checkbox
                onChange={(e) => {
                  const {checked} = e.target;
                  const customAuth = checked ? "1" : "0";
                  this.handlePrePropChange(
                    'customAuth',
                    customAuth,
                  );
                }}
                checked={
                  modelProperties.customAuth === "1" ? check : unCheck
                }
              >
                自定义按钮
              </Checkbox>
            </div>
            <Modal
              title={`添加自定义按钮`}
              visible={addButtonFormVisible}
              onOk={() => this.handleAddCustomButton(customButtonName, customButtonScript, customButtons)}
              onCancel={() => this.setState({addButtonFormVisible: false})}
            >
              <div>
                <div className={styles.content_item}>
                  <span className={styles.item_label}>按钮名称：</span>
                  <Input required={true}
                         onChange={(ev) =>
                           this.handleChage("customButtonName", ev.target.value)
                         }
                  />
                </div>
                <div className={styles.content_item}>
                  <span className={styles.item_label}>执行脚本：</span>
                  <TextArea
                    onChange={(ev) =>
                      this.handleChage("customButtonScript", ev.target.value)
                    }
                  />
                </div>
              </div>
            </Modal>
            <div style={{display: modelProperties.customAuth === "1" ? 'block' : 'none'}}>
              <Row
                className={styles.buttons}
                justify="space-between"
                style={{marginTop: 16}}
                type="flex"
              >
                <Button onClick={() => {
                  this.setState({addButtonFormVisible: true});
                  // this.handleAddCustomButton(customButtonName,customButtonScript);
                }}>
                  添加
                </Button>
                {!disable && selectedButtonKeys.length > 0 ? (
                  <Popconfirm
                    placement="top"
                    title={`请确认是否删除当前选中自定义按钮`}
                    onConfirm={() => {
                      this.setState(
                        {
                          // selectedButtonKeys: [],
                        },
                        () => {
                          this.handleDeleteCustomButtons(customButtons, selectedButtonKeys);
                          this.forceUpdate();
                        },
                      );
                    }}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Button>删除</Button>
                  </Popconfirm>
                ) : (
                  <Button disabled>删除</Button>
                )}
                {customButtons.length > 0 ? (
                  <Popconfirm
                    placement="top"
                    title={`请确认是否删除所有自定义按钮`}
                    onConfirm={() => {
                      this.handlePrePropChange(
                        'customButtonList',
                        [],
                      );
                      this.handlePrePropChange(
                        'selectedButtonKeys',
                        [],
                      );
                      this.forceUpdate();
                    }}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Button>全删</Button>
                  </Popconfirm>
                ) : (
                  <Button disabled>全删</Button>
                )}
              </Row>
              <Table
                style={{marginTop: 18}}
                columns={[
                  {title: "按钮名称", dataIndex: "buttonName"},
                  {
                    title: "脚本",
                    dataIndex: "buttonScript",
                    // render: (v) => {
                    //   return typeLabelMap[v];
                    // },
                  },
                ]}
                dataSource={customButtons}
                pagination={{
                  pageSize: 5,
                }}
                rowKey="buttonId"
                rowSelection={{
                  fixed: true,
                  getCheckboxProps: () => ({
                    disabled: disable,
                  }),
                  onChange: (keys) => {
                    if (disable) return;
                    this.setState({selectedButtonKeys: keys});
                  },
                  selectedRowKeys: selectedButtonKeys,
                }}
                size="small"
              />
            </div>

          </div>
        </div>
      </>
      // </div>
    );
  }

  handleFileChange = info => {
    if (info.file.status === "done") {
      const {response = {}} = info?.file;
      const {errCode, errMsg} = response;
      if (errCode === 0) {
        message.success(`${info.file.name} 文件上传成功`);
      } else {
        message.error(errMsg);
      }
    } else if (info.file.status === "error") {
      message.error(`${info.file.name} 文件上传失败`);
    }
    const fileList = [...info.fileList].filter(v => {
      if (v.status !== "done") { // 非完成的文件直接设置到fileList里，不然打印第一次，就不会再触发onChange事件了
        return true;
      }
      if (v.response && v.response.success || v?.attachId) {
        return true;
      }
      return false;
    })
    this.setState({fileList}, () => {
      this.handlePrePropChange("attachInfos",
        fileList.map(v => {
          return {
            attachId: v?.response?.datas || v?.attachId,
            fileName: v?.name,
            serviceType: "0",
            uid: v?.uid,
            status: v?.status,
          }
        }));
    });
  };

  handleFileRemove = (file) => {
    const {dispatch} = this.props;
    const {fileList} = this.state;
    const newFileList = fileList.filter(item => item.uid !== file.uid) || [];
    this.setState({fileList: newFileList}, () => {
      dispatch({
        type: 'FlowChart/deleteFile', payload: {attachId: file?.attachId, fileName: file.name, serviceType: 0},
      })
    });
  };

  handleDownload = (file) => {
    const a = document.createElement("a");
    a.href = `/flow-platform/oss/downloadFile?attachId=${file?.attachId}&fileName=${file.name}&serviceType=0`;
    a.setAttribute("download", file.name);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };


  render() {
    const {activeKey, isEdittingParameters, formVisible, filList, fileList, customTitleVisible} = this.state;
    const {
      appId,
      changeModelVariableRef,
      disable,
      dispatch,
      modelProperties,
      modelVariableRef,
      // disable,
      modelForms,
      updateModelForms,
      sampleDetailData: {busiId} = {},
      isCanvas,
      flowEditRef,
      selectedModel = {},
      customTitleList = [],
    } = this.props;
    const {shape = ""} = selectedModel;

    // if(modelProperties?.formFields?.length > 0){
    //   this.state.filList = modelProperties.formFields
    // }
    const customButtonList = modelProperties.customButtonList;
    const qianList = filList || modelProperties?.formFields || [];
    const ziduanList = qianList.filter(item => {
      return (item.fieldType === 0);
    });
    const wjList = qianList.filter(item => {
      return (item.fieldType === 1);
    });

    const {
      modelVariables,
      timeoutSetting,
      copyTo,
      formkeydefinition = "",
      formId,
      formname = "",
      customTitle = [],
    } = modelProperties;

    const value = formatFormParameters(modelVariables);
    const canChangeForm = !isFormReferenced(formId, modelForms);

    const uploadProps = {
      action: "/flow-platform/oss/uploadFiles",
      data: {type: 'file', name: 'file', serviceType: '0'},
      multiple: true,
      onChange: this.handleFileChange,
      onRemove: this.handleFileRemove,
      onDownload: this.handleDownload,
      onPreview: this.handleDownload,
      showUploadList: {
        showPreviewIcon: true,
        showRemoveIcon: true,
        showDownloadIcon: true,
      },
    };

    const handleCustomTitle = () => {
      this.setState({customTitleVisible: false});
    }

    return _isEmpty(shape) ? (
      <div
        data-status="canvas-selected"
        className={`pannel ${styles.tabContent}`}
        id="canvas_detailpannel"
      >
        <div className={styles.headTitle}>流程</div>
        <Tabs
          activeKey={activeKey}
          className={styles.smallTab}
          onChange={key => this.setState({activeKey: key})}
          size="small"
        >
          <TabPane tab="流程属性" key="1">
            {this.renderInfo()}
          </TabPane>
          <TabPane tab="流程变量" key="2">
            <Button
              onClick={() => this.setState({isEdittingParameters: true})}
              type="primary"
              size="small"
              style={{marginBottom: 16, marginLeft: 14}}
              disabled={disable}
            >
              编辑
            </Button>
            <Table
              columns={[
                {
                  title: "变量名称",
                  dataIndex: "name",
                  render: value1 => (
                    <span style={{whiteSpace: "pre"}}>{value1}</span>
                  ),
                },
                {title: "变量编码", dataIndex: "code"},
              ]}
              rowKey="uuid"
              dataSource={value}
              pagination={{
                pageSize: 5,
              }}
            />
          </TabPane>
          <TabPane tab="表单设置" key="3">
            <div className={`block-container ${styles.content}`}>
              <div
                className={`${styles.user__select} ${
                  disable ? styles.user__select_disable : ""
                }`}
                onClick={() => {
                  if (canChangeForm) {
                    this.handleformVisible(true);
                  } else {
                    this.openNotificationWithIcon(
                      "warning",
                      "",
                      `此表单被流程或节点变量引用，请删除变量后再进行修改`,
                    );
                  }
                }}
                style={{position: "relative", paddingRight: 15}}
              >
                {formkeydefinition ? (
                  <>
                    <span
                      className={styles.placeholder}
                      style={{marginTop: 4, color: "rgba(0,0,0,.65)"}}
                    >
                      {formname}
                    </span>
                    {canChangeForm ? (
                      <Zcon
                        type="close"
                        style={{position: "absolute", top: 8}}
                        onClick={e => {
                          e.stopPropagation();
                          if (canChangeForm) {
                            this.handleFormSelect("");
                            this.emptys();
                          }
                        }}
                      />
                    ) : null}
                  </>
                ) : (
                  <span className={styles.placeholder}>请选择</span>
                )}
              </div>
            </div>
            {ziduanList.length > 0 ? (
              <>
                <div value="2" style={{margin: "8px auto"}}>
                  字段权限
                </div>
                <div>
                  <Table
                    columns={[
                      {
                        title: "字段ID",
                        dataIndex: "fieldId",
                        ellipsis: true,
                        render: v => (
                          <span className={styles.shortCell} title={v}>
                            {v}
                          </span>
                        ),
                      },
                      {
                        title: "字段名称",
                        dataIndex: "fieldName",
                        ellipsis: true,
                        render: v => (
                          <span className={styles.shortCell} title={v}>
                            {v}
                          </span>
                        ),
                      },
                      {
                        title: "可见",
                        dataIndex: "visiable",
                        ellipsis: true,
                        render: (value1, record) => (
                          <Checkbox
                            onChange={e =>
                              this.onReCommentChecked(
                                value1,
                                record,
                                e,
                                "visiable",
                              )
                            }
                            checked={record.visiable}
                          />
                        ),
                      },
                      {
                        title: "可编辑",
                        dataIndex: "edit",
                        ellipsis: true,
                        render: (value1, record) => (
                          <Checkbox
                            onChange={e =>
                              this.onReCommentChecked(value1, record, e, "edit")
                            }
                            checked={record.edit}
                          />
                        ),
                      },
                      {
                        title: "是否必填",
                        dataIndex: "required",
                        render: (value1, record) => (
                          <Checkbox
                            className="required"
                            onChange={e =>
                              this.onReCommentChecked(
                                value1,
                                record,
                                e,
                                "required",
                              )
                            }
                            checked={record.required}
                          />
                        ),
                      },
                    ]}
                    dataSource={ziduanList}
                    pagination={{
                      pageSize: 5,
                    }}
                    size="small"
                  />
                </div>
              </>
            ) : null}
            {wjList.length > 0 ? (
              <>
                {" "}
                <div value="2" style={{marginBottom: "8px"}}>
                  文件权限
                </div>
                <div>
                  <Table
                    columns={[
                      {
                        title: "字段ID",
                        dataIndex: "fieldId",
                        ellipsis: true,
                        render: v => (
                          <span className={styles.shortCell} title={v}>
                            {v}
                          </span>
                        ),
                      },
                      {
                        title: "字段名称",
                        dataIndex: "fieldName",
                        ellipsis: true,
                        render: v => (
                          <span className={styles.shortCell} title={v}>
                            {v}
                          </span>
                        ),
                      },
                      {
                        title: "可下载",
                        dataIndex: "download",
                        ellipsis: true,
                        render: (value1, record) => (
                          <Checkbox
                            onChange={e =>
                              this.onReCommentChecked(
                                value1,
                                record,
                                e,
                                "download",
                              )
                            }
                            checked={record.download}
                          />
                        ),
                      },
                      {
                        title: "可增减",
                        dataIndex: "incOrDec",
                        ellipsis: true,
                        render: (value1, record) => (
                          <Checkbox
                            onChange={e =>
                              this.onReCommentChecked(
                                value1,
                                record,
                                e,
                                "incOrDec",
                              )
                            }
                            checked={record.incOrDec}
                          />
                        ),
                      },
                      {
                        title: "是否必填",
                        dataIndex: "required",
                        ellipsis: true,
                        render: (value1, record) => (
                          <Checkbox
                            onChange={e =>
                              this.onReCommentChecked(
                                value1,
                                record,
                                e,
                                "required",
                              )
                            }
                            checked={record.required}
                          />
                        ),
                      },
                    ]}
                    dataSource={wjList}
                    pagination={{
                      pageSize: 5,
                    }}
                    size="small"
                  />
                </div>
              </>
            ) : null}
          </TabPane>
          <TabPane tab="高级设置" key="4">
            <div style={{padding: "0 12px"}}>
              <CarbonCopySetting
                value={copyTo}
                onChange={newValue => {
                  let finalValue = newValue;
                  if (newValue) {
                    finalValue = finalValue.map(v => {
                      const {userCode, userName} = v || {};
                      return {
                        // 前端回显用的数据
                        ...v,
                        // 提交给后端用的数据
                        code: userCode,
                        name: userName,
                        type: "STA",
                      };
                    });
                  }
                  this.handlePrePropChange("copyTo", finalValue);
                }}
              />

              <DuedateSetting
                appId={appId}
                changeModelVariableRef={changeModelVariableRef}
                codeRefModel={modelProperties}
                dispatch={dispatch}
                disable={disable}
                modelVariables={modelVariables}
                onValueUpdate={this.handlePrePropChange}
                timeoutSetting={timeoutSetting}
                type="流程"
              />
            </div>
          </TabPane>
          <TabPane tab="对象" key="5">
            <div style={{paddingRight: "16px", paddingLeft: "16px"}}>
              <UserTaskObject
                dispatch={dispatch}
                handleChangeProperties={this.handlePrePropChange}
                selectedModel={null}
                modelProperties={modelProperties}
              />
            </div>
          </TabPane>
          <TabPane tab="文档" key="6">
            <div style={{paddingRight: '16px', paddingLeft: '16px'}}>
              <Upload
                {...uploadProps}
                fileList={fileList}
              >
                <Button>
                  <Icon type="upload"/>
                  上传文档
                </Button>
              </Upload>
            </div>
          </TabPane>
        </Tabs>
        {isEdittingParameters ? (
          <ParametersEditor
            modelVariableRef={modelVariableRef}
            value={value}
            handleOk={v => {
              this.handlePrePropChange("modelVariables", v, updateModelForms);
              this.setState({isEdittingParameters: false});
            }}
            handleCancel={() => this.setState({isEdittingParameters: false})}
            handleError={msg => this.openNotificationWithIcon("error", "", msg)}
            modelForms={modelForms}
          />
        ) : null}
        {formVisible && (
          <FlowFormSelect
            dispatch={dispatch}
            visible={formVisible}
            // selectData={formkeydefinition}
            onCancel={() => this.handleformVisible(false)}
            // formSelect={this.handleFormSelect}
            selectFormData={{formkeydefinition, formname}}
            formDetailSelect={this.handleFormSelect}
            processExternalFormDetailSelect={this.handleExternalFormSelect}
            extraParam={{busiId, appId}}
            isCanvas={isCanvas}
            flowEditRef={flowEditRef}
            modelProperties={modelProperties}
            getDatas={this.getDatas}
          />
        )}


        <CustomTitle
          customTitleVisible={customTitleVisible}
          handleOk={handleCustomTitle}
          handleCancel={() => this.setState({customTitleVisible: false})}
          dispatch={dispatch}
          customTitle={customTitle} // 回显数据
          customTitleList={customTitleList} // 原始数据
          handleChangeProperties={this.handlePrePropChange}
          selectedModel={selectedModel}
        />


      </div>
    ) : (
      <></>
    );
  }
}


export default CanvasSelected;
